import Button, { ButtonProps } from 'antd/es/button';
import Collapse from 'antd/es/collapse';
import { HighlightDemo } from './highlight-demo';
import { SelectionDemo } from './selection-demo';
import { ViewDemo } from './view-demo';
import { ModelDemo } from './model-demo';
import { FittingViewerDemo } from './fitting-viewer-demo';
import { CameraDemo } from './camera-demo';
import { BOMFittingViewerDemo } from './bom-fitting-viewer-demo';
import { FloorplanDemo } from './floorplan-demo';
import { LabelDemo } from './label-demo';
import { VisibilityDemo } from './visibility-demo';
import { RulerLineDemo } from './ruler-line-demo';

const Panel = Collapse.Panel;


export function FunctionDemo() {

    const createButtonGroup = (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
        buttonProps?: ButtonProps;
    }>) => {
        return infos.map((info) => <Button
            {...(info.buttonProps || {})}
            key={info.name}
            type="primary"
            onClick={info.onClick}
            size="small"
            ghost
        >
            {info.name}
        </Button>)
    }

    const Panels = [{
        key: 'sceneService',
        title: 'sceneService',
        comp: ViewDemo,
    }, {
        key: 'selectionService',
        title: 'selectionService',
        comp: SelectionDemo,
    }, {
        key: 'highlightService',
        title: 'highlightService',
        comp: HighlightDemo,
    }, {
        key: 'modelService',
        title: 'modelService',
        comp: ModelDemo,
    }, {
        key: 'fittingViewerService',
        title: 'fittingViewerService',
        comp: FittingViewerDemo,
    }, {
        key: 'cameraService',
        title: 'cameraService',
        comp: CameraDemo,
    }, {
        key: 'bomFittingViewerService',
        title: 'bomFittingViewerService',
        comp: BOMFittingViewerDemo,
    }, {
        key: 'visibilityDemo',
        title: 'visibilityDemo',
        comp: VisibilityDemo,
    }, {
        key: 'floorplanService',
        title: 'floorplanService',
        comp: FloorplanDemo,
    }, {
        key: 'labelService',
        title: 'labelService',
        comp: LabelDemo,
    }, {
        key: 'rulerLineService',
        title: 'rulerLineService',
        comp: RulerLineDemo,
    },];

    return <Collapse defaultActiveKey={Panels.map(p => p.key)} >
        {Panels.map(p => <Panel header={p.title} key={p.key}> <p.comp createButton={createButtonGroup} /></Panel>)}
    </Collapse>
}